<template>
    <el-form v-if="props.clientId == null" inline  >
        <el-form-item label="发送方名">
            <el-input v-model="query.payload.senderName" placeholder="发送方名" />
        </el-form-item>
        <el-form-item label="关键字">
            <el-input v-model="query.payload.content" placeholder="关键字" />
        </el-form-item>
        <el-form-item label="分词器">
            <el-select v-model="query.payload.analyzer" placeholder="请选择">
                <el-option  label="ik_smart" value="ik_smart" />
                <el-option  label="ik_max_word" value="ik_max_word" />
            </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
            <el-date-picker
                    v-model="query.dateRange"
                    type="datetimerange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
            />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain  activity @click="queryMessage">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" plain  activity @click="reset">重置</el-button>
        </el-form-item>
    </el-form>

    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" v-loading="loading" :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index" label="序号" width="100px" v-if="props.clientId == null" />
        <el-table-column align="center"  prop="id" label="会话ID" >
            <template #default="scope">
                <el-link style="font-size: 14px" title="详情" type="primary" @click="showMessage(scope.row.chatId)">
                   {{scope.row.chatId}}
                </el-link>
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="senderName" label="发送方名" />
        <el-table-column align="center"  prop="sender" label="发送方" >
            <template  #default="scope">
                <div v-if="scope.row.sender=='client'">
                    客户
                </div>
                <div v-else-if="scope.row.sender=='agent'">
                    坐席
                </div>
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="content" html label="消息内容" >
            <template #default="scope">
                <div v-html="scope.row.content"></div>
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="type" label="消息类型">
            <template v-cloak #default="scope">
                {{scope.row.type}}
            </template>
        </el-table-column>
        <el-table-column align="center"  label="创建时间" prop="createTime" >
            <template #default="scope">
                {{moment(scope.row.createTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                style="display: flex;align-items:center;justify-content:center;"
                v-model:currentPage="query.currentPage"
                v-model:page-size="query.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="queryMessage"
                @current-change="queryMessage"
        />
    <HisChat ref="hisChat" :chatId = thisChatId />
</template>

<script setup>
    import HisChat from '@/components/business/HisChat.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref, reactive, onMounted} from 'vue'
    import moment from 'moment'
    import useAuthBtn from '@/hooks/useAuthBtn.js'
    let authBtn = useAuthBtn()
    let props = defineProps(['clientId'])
    let loading = ref(false)
    let hisChat = ref()
    let thisChatId = ref(0)
    let chatTypeDicItems = reactive([])
    let chatsAction = ""
    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    });

    let query = reactive({dateRange:[], currentPage:1, pageSize:10, total:0, payload:{analyzer:"ik_smart"}})

    onMounted(()=>{

        request.get(`/api/useDic/getDicItems/chatType`).then(resp => {
            chatTypeDicItems.push(...resp)
        })
    })

    function queryMessage(){
        query.startTime = query.dateRange[0]
        query.endTime = query.dateRange[1]
        loading.value = true
        request.post("/api/message/getMessagesByKeyword", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }

    function reset (){
        query.payload.senderName = ""
        query.payload.content = ""
        query.dateRange=[]
    }

    function showMessage (chatId){
        hisChat.value.showDialog = true
        thisChatId.value = chatId
    }

    // function download (chatId){
    //     request.post('/api/chat/download', query).then(resp => {
    //         window.open(resp)
    //     })
    // }

</script>
<style lang="css" scoped>
    em{
        background-color: gold;
    }
</style>